<template>
   <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="visible" width="900px">
      <el-form label-width="50px" :inline="true">
        <el-form-item label="名称">
          <el-input v-model="search.name" :placeholder="`请输入${relateType == 'exam' ? '试卷' :'课程'}名称`" clearable></el-input>
        </el-form-item>
        <el-form-item label="年级">
            <nice-select v-model="search.grade" placeholder="请选择年级" clearable :options="selectEnums.nice_course.grade"></nice-select>
          </el-form-item>
        <el-form-item label="科目">
          <nice-select v-model="search.subject" placeholder="请选择科目" clearable :options="selectEnums.nice_course.subject"></nice-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDataList" size="small">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="margin-top20 margin-bottom20">
         <el-tag v-for="(tag,index) in chooseList" :key="index" closable @close="handleClose(tag,index)"> {{tag.name}}</el-tag>
      </div>
      <el-table :data="list" border>
        <el-table-column prop="name" label="名称" ></el-table-column>
        <el-table-column prop="course_title" label="题量" v-if="relateType == 'exam'"></el-table-column>
        <el-table-column prop="date" label="分值" v-if="relateType == 'exam'"></el-table-column>
        <el-table-column label="年级" v-if="relateType == 'course'">
           <template slot-scope="scope">
             <span>{{scope.row.grade | G(selectEnums.nice_course.grade)}}</span>
           </template>
        </el-table-column>
        <el-table-column label="科目" v-if="relateType == 'course'">
          <template slot-scope="scope">
             <span>{{scope.row.subject | G(selectEnums.nice_course.subject)}}</span>
           </template>
        </el-table-column>
        <el-table-column prop="date" label="类型" v-if="relateType == 'course'">
            <template slot-scope="scope">
             <span>{{scope.row.type | G(selectEnums.nice_course.type)}}</span>
           </template>
        </el-table-column>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
            <template slot-scope="scope">
                <el-button :type="scope.row.isChoose ? 'info':'primary'" @click="choose(scope.row,scope.row.isChoose)" size="small">选择</el-button>
            </template>
      </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false" size="small">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit"  size="small" v-preventReClick>确定</el-button>
      </span>
   </el-dialog>
</template>
<script>
import {myEnumsMixins} from '@/utils/mixins'
import {queryCourseList,relevance_course,relevance_paper,getExamDetailsById}  from  '@/api/exam.js'
export default {
  data(){
    return {
      visible:false,
      title:'',
      list:[],
      exam_id:'',
      search:{
        name:'',
        grade:'',
        subject:''
      },
      chooseList:[]
    }
  },
  props:{
    relateType:{
      type:String,
      default:''
    }
  },
  mixins: [myEnumsMixins],
  methods:{
    init(id){
      this.visible = true
      this.title = this.relateType == 'exam' ? '关联试卷' : '关联课程'
      this.exam_id = id
      this.chooseList = []
      this.search = {
        name:'',
        grade:'',
        subject:''
      }
      this.getExamDetailsById()
      this.getDataList()
    },
    async getExamDetailsById(){
      let res = await getExamDetailsById({id:this.exam_id})
      if(res[0]){return}
      if(res[1].code ==0){
        let response = res[1].data
        let arr = response.examCourseList.filter(ele=>{
          return ele.type == 2
        })
        this.chooseList = arr.map(ele=>{
          return {
            name:ele.courseName,
            id:ele.courseId
          }
        })
      }
    },
    async getDataList(){
     let params = this.relateType == 'exam' ? {examId:this.exam_id,courseName:this.search.name,grade:this.search.grade,subject:this.search.subject}:{examId:this.exam_id,courseName:this.search.name,grade:this.search.grade,subject:this.search.subject}
     let res = this.relateType == 'exam' ? await queryCourseList(params) : await queryCourseList(params)
     if(res[0]){return}
     if(res[1].code ==0){
      this.list = res[1].data.list.map(ele=>{
        ele.isChoose = false
        return ele
      })
     }
    },
    handleClose(tag,index){
      this.chooseList.splice(index,1)
      this.list.forEach(ele=>{
        if(ele.id == tag.id){
          ele.isChoose = false
        }
      })
    },
    choose(row,bol){
      row.isChoose = !row.isChoose
      if(bol){
        let data = JSON.parse(JSON.stringify(this.chooseList))
        data.forEach((ele,index)=>{
          if(ele.id == row.id){
            this.chooseList.splice(index,1)
          }
        })
      }else{
        this.chooseList.push(row)
      } 
    },
    async dataFormSubmit(){
      if(!this.chooseList.length){
        this.$message.warning('请选择关联课程！')
        return false
      }
      let courseParams = this.chooseList.map(ele=>{
        return {
          courseId:ele.id,
          examId:this.exam_id,
          type:1
        }
      })
      let res = this.relateType == 'exam' ? await relevance_paper({}) :await relevance_course(courseParams)
      if(res[0]){return}
      if(res[1].code ==0){
        this.$message.success(this.relateType == 'exam' ? '关联考试成功！':'关联课程成功')
        this.visible = false
        this.$emit('refreshData')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-tag{
  margin:10px 10px 10px 0px
}
</style>
